<template>
  <div class="ffp">
    <div class="ffp-main">
      <div class="cun">
        <span>选择组</span>
        <div class="sel">
          <div @click="cunsClick">{{ cun }}</div>
          <ul v-if="iscuns">
            <li v-for="item in cuns" @click="cunClick(item)">{{ item }}</li>
          </ul>
        </div>
      </div>
      <div class="chaxun">
        <div class="inp">
          <input type="text" placeholder="户主姓名" v-model="name" />
        </div>
        <div class="inp">
          <input type="text" placeholder="手机号" v-model="tel" />
        </div>
        <div class="sel">
          <div @click="scClick">{{ sx }}</div>
          <ul v-if="issx">
            <li v-for="item in sxs" @click="sxClick(item)">{{ item }}</li>
          </ul>
        </div>
        <div class="search">
          <img src="~assets/img/ksh/search2.png" alt="" />
        </div>
      </div>
      <div class="datas">
        <div class="ss_li" v-for="item in records" @click="openData">
          <div class="ss_main">
            <div class="ss_le">
              <img :src="item.img" alt="" />
            </div>
            <div class="ss_ri">
              <p>人员姓名:{{ item.name }}</p>
              <p>人员民族:{{ item.nation }}</p>
              <p>户籍地址:{{ item.site }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="info" v-if="isdata">
      <div class="info-main">
        <div class="close" @click="closeData"></div>
        <div class="info-tit">
          详情
        </div>
        <div class="info-ex">
          <img src="~assets/img/day/data.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cuns: ["村一组", "村二组", "村三组", "村四组", "村五组", "村六组"],
      cun: "村一组",
      iscuns: false,
      sxs: ["贫困户", "五保户"],
      issx: false,
      sx: "户属性",
      name: null,
      tel: null,
      records: [
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
        {
          img: require("assets/img/day/li_ico5.png"),
          name: "吴越",
          nation: "汉族",
          idCard: "123432******242135",
          site: "河北省石家庄市某某县某某街道001号",
          date: "2019年08月22日",
        },
      ],
      isdata: false
    };
  },

  mounted() {},

  methods: {
    cunClick(item) {
      this.cun = item;
      this.iscuns = false;
    },
    cunsClick() {
      this.iscuns = !this.iscuns;
    },
    sxClick(item) {
      this.sx = item;
      this.issx = false;
    },
    scClick() {
      this.issx = !this.issx;
    },
    openData() {
      this.isdata = true
    },
    closeData() {
      this.isdata = false
    }
  },
};
</script>

<style lang="scss" scoped>
.ffp {
  padding: 6.25rem 1.25rem 1.25rem;
  .ffp-main {
    background: url(~assets/img/day/main_bg.png) no-repeat;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding: 0.625rem 1.25rem;
    .cun {
      color: #2e9eff;
      font-size: 1rem;
      font-family: "黑体";
      display: flex;
      .sel {
        width: 9.375rem;
        height: 1.875rem;
        margin-left: 0.625rem;
        text-align: center;
        border: 0.0625rem solid rgb(46, 158, 255);
        background: url(~assets/img/ksh/pull2.png) no-repeat;
        background-position: 90% center;
        background-size: 0.6875rem 0.375rem;
        color: #2e9eff;
        border-radius: 0.1875rem;
        z-index: 2;
        line-height: 1.875rem;
        ul {
          margin-top: 0.625rem;
          border: 0.0625rem solid rgb(46, 158, 255);
          border-radius: 0.1875rem;
          li {
            border-bottom: 0.0625rem solid rgb(46, 158, 255);
            line-height: 1.875rem;
            background-color: rgba(24, 25, 25, 1);
          }
        }
      }
    }
    .chaxun {
      margin-top: 1.875rem;
      border: 0.0625rem solid rgb(22, 93, 255);
      background-color: rgba(22, 93, 255, 0.302);
      display: flex;
      width: 43.75rem;
      padding: 0.625rem;
      .inp {
        margin-right: 0.625rem;
        input {
          border: 0.0625rem solid rgb(22, 93, 255);
          background-color: rgba(24, 25, 25, 0.251);
          color: #fff;
          line-height: 1.875rem;
          border-radius: 0.1875rem;
          font-size: 1rem;
          padding-left: 0.625rem;
        }
        input::placeholder {
          color: #fff;
        }
      }
      .sel {
        width: 9.375rem;
        height: 2rem;
        border: 0.0625rem solid rgb(22, 93, 255);
        background: url(~assets/img/ksh/pull2.png) no-repeat;
        background-position: 90% center;
        background-size: 0.6875rem 0.375rem;
        color: #fff;
        border-radius: 0.1875rem;
        font-size: 1rem;
        line-height: 2rem;
        z-index: 123;
        div {
          padding-left: 0.625rem;
          background-color: rgba(24, 25, 25, 0.251);
        }
        ul {
          margin-top: 0.3125rem;
          border: 0.0625rem solid rgb(22, 93, 255);
          border-radius: 0.1875rem;
          li {
            border-bottom: 0.0625rem solid rgb(22, 93, 255);
            line-height: 1.875rem;
            padding-left: 0.625rem;
            background-color: rgba(24, 25, 25, 1);
          }
        }
      }
      .search {
        margin-left: 0.625rem;
        background-color: #165dff;
        padding: 0 0.9375rem;
        border-radius: 0.1875rem;
        display: flex;
        align-items: center;
        img {
          width: 1.25rem;
          height: 1.3125rem;
        }
      }
    }
    .datas {
      margin-top: 1.25rem;
      height: calc(100% - 9.0625rem);
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      .ss_li {
        background: url(~assets/img/day/li_bg.png) no-repeat;
        background-size: 100% 100%;
        padding: 1.25rem;
        box-sizing: border-box;
        display: flex;
        margin: 0.625rem 1%;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        width: 21.5rem;
        flex: 0 0 18%;

        .ss_li_tit {
          text-align: center;
          font-size: 0.875rem;
          width: 100%;
        }

        .ss_main {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          .ss_le {
            width: 6.0625rem;
            height: 5.4375rem;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .ss_ri {
            margin-left: 0.625rem;
            width: 70%;
            p {
              margin: 0;
              color: #02c6d6;
              font-size: 0.75rem;
              font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
                sans-serif;
            }
          }
        }
      }
    }
  }
  .info {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(24, 25, 25, 0.8);
    z-index: 123;
    display: flex;
    align-items: center;
    justify-content: center;
    .info-main {
      width: 104.1875rem;
      height: 51.6875rem;
      background: url(~assets/img/day/databg.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      .close {
        width: 3.125rem;
        height: 3.125rem;
        background: url(~assets/img/sy/close.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 1.875rem;
        top: 1.875rem;
      }
      .info-tit {
        font-size: 1.25rem;
        background: url(~assets/img/day/datatit.png) no-repeat;
        width: 15.125rem;
        height: 2.9375rem;
        line-height: 2.9375rem;
        margin: 0.9375rem auto;
        text-align: center;
      }
      .info-ex {
        width: 90%;
        margin: 0 auto;
        height: calc(100% - 7.5rem);
        overflow: auto;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>